$(function () {
  echarts_map21();
  echarts_map22();

  function echarts_map21() {
    var myChart = echarts.init(document.getElementById('bigmap21'));
    option = {
      title: {
        text: '酒店管理各流程数据',
        subtext: '来自数据统计',
        left: 'left',
        top: 'bottom',
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']
      },
      series: [
        {
          name: 'Funnel',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '5%',
          top: '50%',
          funnelAlign: 'right',
          data: [
            { name: '浏览官网', value: 100 },
            { name: '查看房间信息', value: 70 },
            { name: '加入购物车', value: 35 },
            { name: '提交订单', value: 15 },
            { name: '付款', value: 8 }
          ],
          label: {
            textStyle: {
              fontFamily: 'Arial', // 设置字体
              fontSize: 12 // 设置字号
            },
            textBorderColor: 'transparent' // 设置文字边框颜色为透明
          }
        },

        {
          name: 'Pyramid',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '5%',
          top: '5%',
          sort: 'ascending',
          funnelAlign: 'right',
          data: [
            { name: '广告曝光', value: 100 },
            { name: '点击广告', value: 70 },
            { name: '浏览官网', value: 35},
            { name: '提交联系方式', value: 15 },
            { name: '预购房间', value: 8 }
          ],
          label: {
            textStyle: {
              fontFamily: 'Arial', // 设置字体
              fontSize: 12 // 设置字号
            },
            textBorderColor: 'transparent' // 设置文字边框颜色为透明
          }
        },
        {
          name: 'Funnel',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '55%',
          top: '5%',
          funnelAlign: 'left',
          data: [
            { name: '阅读标题', value: 100 },
            { name: '浏览内容', value: 70 },
            { name: '点击CTA按钮', value: 35 },
            { name: '填写表单', value: 15},
            { name: '成交', value: 8 }
          ],
          label: {
            textStyle: {
              fontFamily: 'Arial', // 设置字体
              fontSize: 12 // 设置字号
            },
            textBorderColor: 'transparent' // 设置文字边框颜色为透明
          }
        },
        {
          name: 'Pyramid',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '55%',
          top: '50%',
          sort: 'ascending',
          funnelAlign: 'left',
          data: [
            { name: '用户服务需求', value: 100 },
            { name: '服务请求提交', value: 80 },
            { name: '服务进程跟踪', value: 55 },
            { name: '服务完成', value: 48 },
            { name: '服务评价', value: 38 }
          ],
          label: {
            textStyle: {
              fontFamily: 'Arial', // 设置字体
              fontSize: 12 // 设置字号
            },
            textBorderColor: 'transparent' // 设置文字边框颜色为透明
          }
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener("resize", function () {
      myChart.resize();
    });




  }

  function echarts_map22() {
    var svg, width, height, layout, colorScale;

    function createWordCloud() {
      var words = generateRandomData();

      width = document.getElementById("bigmap22").clientWidth;
      height = document.getElementById("bigmap22").clientHeight;
      // height = height*0.95;
      if (!svg) {
        svg = d3.select("#bigmap22")
          .append("div")
          .style("position", "relative")
          .append("svg")
          .attr("width", "100%")
          .attr("height", height);

        layout = d3.pack()
          .padding(0);

        colorScale = d3.scaleOrdinal(d3.schemeCategory10);
      }

      layout.size([width, height]);

      var root = d3.hierarchy({ children: words })
        .sum(function (d) { return d.size; });

      layout(root);

      svg.selectAll("*").remove(); // 清空之前的词云图

      var nodes = svg.selectAll("text")
        .data(root.leaves())
        .enter().append("text")
        .style("font-size", function (d) { return d.r + "px"; })
        .attr("text-anchor", "middle")
        .attr("transform", function (d) { return "translate(" + [d.x, d.y] + ")"; })
        .style("fill", function (d, i) { return colorScale(i); })
        .text(function (d) { return d.data.text; })
      // .attr("transform", function(d) {
      //   // 设置每个词的随机旋转角度
      //   var rotate = Math.random() < 0.5 ? 0 : 90;
      //   return "translate(" + [d.x, d.y] + ") rotate(" + rotate + ")";
      // });
    }

    function generateRandomData() {
      var names = [
        "好评",
        "舒适",
        "环境优美",
        "服务周到",
        "设施齐全",
        "美食",
        "性价比高",
        "位置便利",
        "满意",
        "推荐",
        "干净",
        "愉快",
        "交通方便",
        "安静",
        "出色",
        "好评",
        "舒适",
        "环境优美",
        "服务周到",
        "热情友好",
        "温馨舒适",
        "设施新",
        "早餐丰富",
        "房间宽敞",
        "床品舒适",
        "游泳池干净",
        "健身房设备齐全",
        "无线网络稳定",
        "停车位充足",
        "周边景点多",
        "周边餐饮丰富",
        "酒店位置好",
        "酒店装修精致",
        "交通方便",
        "安静舒适",
        "价格合理",
        "房间整洁",
        "早餐味道好",
        "酒店设施新",
        "酒店位置便利",
        "酒店环境优美",
        "酒店性价比高",
        "酒店设施齐全"
      ];
      var data = [];

      for (var i = 0; i < names.length; i++) {
        // 根据需求修改 size 的值，控制权重大小
        var size = Math.floor(Math.random() * 200) + 3; // 这里可以根据需求修改权重范围
        data.push({
          text: names[i],
          size: size
        });
      }

      return data;
    }

    // 在页面加载完成后调用生成词云图的函数
    window.addEventListener('load', createWordCloud);
    window.addEventListener("resize", function () {
      createWordCloud(); // 当容器大小变化时重新生成词云图
    });
  }
});